<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iview.css">
    <script src="./js/vue.js"></script>
    <script src="./js/iview.js"></script>
</head>

<body>
    <div id="app">
        <div style="width: 500px">
            <template>
                <Alert>消息提示文案</Alert>
                <Alert type="success">成功提示文案</Alert>
                <Alert type="warning">警告提示文案</Alert>
                <Alert type="error">错误提示文案</Alert>
            </template>
        </div>
        <i-Button type="primary" @click="modal1=true">Primary</i-Button>
        <Modal v-model="modal1" title="初始化修改密码" @on-ok="ok" @on-cancel="cancel">
            <template>
                <Alert type="warning">欢迎到来，为了安全，请设置您的密码！</Alert>
            </template>
            <i-Form :model="formLeft" label-position="right" :label-width="100">
                <Form-item label="设置密码">
                    <i-Input v-model="formLeft.input1" style="width: 300px;"></i-Input>
                </Form-item>
                <Form-item label="再次输入">
                    <i-Input v-model="formLeft.input2" style="width: 300px;"></i-Input>
                </Form-item>
            </i-Form>
            <div slot="footer" style="text-align: center;">
                <i-Button type="ghost" @click="cancel">取消</i-Button>
                <i-Button type="primary" @click="ok">确定</i-Button>
            </div>
        </Modal>
    </div>
</body>
<script>
var alertVue = new Vue({
    el: '#app',
    data: {
        modal1: false,
        select: [],
        formLeft: {
            input1: '',
            input2: '',
            input3: ''
        }
    },
    methods: {
        ok() {
        	this.modal1=false;
            this.$Message.info('点击了确定');
        },
        cancel() {
        	this.modal1=false;
            this.$Message.info('点击了取消');
        }
    }
});
</script>

</html>
